<!-- 休闲娱乐页面 -->
<template>
  <view class="online-page">
    <!-- 头部背景 -->
    <view class="zzy-top-backgroup">
      <image src="https://healthdao-oss.oss-cn-hangzhou.aliyuncs.com/wap/red_background.png" mode="widthFix" class="backgroud-image"></image>
    </view>
    <!-- 顶部自定义导航 -->
    <u-navbar fixed placeholder title="在线点餐" :autoBack="true" bgColor="transparent" :titleStyle="{ color: '#fff' }" leftIconColor="#fff"> </u-navbar>

    <image src="@/static/img/chaoshengqian.png" style="width: 470rpx; height: 50rpx" class="m-t-60 m-l-30"></image>

    <view class="card-box">
      <u-grid :col="col" :border="false">
        <u-grid-item v-for="(item, index) in dataList" :key="index" @click="jumpTo(item)">
          <view style="padding: 30rpx">
            <image :src="item.icon" style="width: 152rpx; height: 152rpx"></image>
          </view>
        </u-grid-item>
      </u-grid>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      col: 3
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    initData() {
      this.getOnlineOrder()
    },
    async getOnlineOrder() {
      await uni.$u.http
        .post('shop-icon-setting/getIconOnlineOrderPage')
        .then(data => {
          this.dataList = data
        })
        .catch(err => {})
    },
    jumpTo(obj) {
      if (obj.iconType === 0) {
        uni.$u.toast('敬请期待！')
      } else if (obj.iconType === 1) {
        // 外部url,内部浏览器打开,不需要token
        // #ifdef APP-PLUS
        // const result = await this.$mStore.dispatch('permission/requestPermissions', 'ACCESS_FINE_LOCATION')

        // if (result !== 1) return
        // #endif
        uni.$u.route('/pages/index/webView', {
          url: encodeURIComponent(obj.url),
          title: obj.title
        })
      } else if (obj.iconType === 2) {
        // 2为应用内部链接地址
        uni.$u.route(obj.url)
      } else if (obj.iconType === 3) {
        // 外部链接外部打开不需要token
        /*  #ifdef WEB  */
        window.location.href = obj.url
        /*  #endif  */

        /*  #ifndef WEB  */
        plus.runtime.openURL(obj.url)
        /*  #endif  */
      } else if (obj.iconType === 4) {
        // 外部url,内部浏览器打开,需要token
        // #ifdef APP-PLUS
        // const result = await this.$mStore.dispatch('permission/requestPermissions', 'ACCESS_FINE_LOCATION')
        // if (result !== 1) return
        // #endif

        //确保token没有过期
        uni.$u.route('/pages/index/webView', {
          url: encodeURIComponent(obj.url),
          token: true,
          title: obj.title
        })
      } else if (obj.iconType === 5) {
        var app = getApp()
        // 外部链接外部打开需要token
        let num = obj.url.indexOf('?')
        let url = null
        num === -1 ? (url = obj.url + '?token=' + app.globalData.gtktoken) : (url = obj.url + '&token=' + app.globalData.gtktoken)
        /*  #ifdef WEB  */
        window.location.href = url
        /*  #endif  */

        /*  #ifndef WEB  */
        plus.runtime.openURL(url)
        /*  #endif  */
      }
    }
  }
}
</script>
<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.online-page {
  width: 100%;
  position: absolute;

  /* 顶部背景图 start */
  .zzy-top-backgroup {
    width: 100%;
    z-index: 0;
    position: absolute;
    top: 0;

    .backgroud-image {
      width: 100%;
      // will-change: transform;
    }
  }
  /* 顶部背景图 end */

  .card-box {
    margin-top: 30rpx;
    width: 94%;
    margin: 30rpx auto;
    border-radius: 20rpx;
    overflow: hidden;
    background-color: #fff;
  }
}
</style>
